<nz-layout class="app-layout">
	<nz-sider class="menu-sidebar" nzCollapsible nzWidth="200px" [(nzCollapsed)]="isCollapsed" [nzTrigger]="null">
		<div class="sidebar-logo">
			<a *ngIf="isCollapsed">
				<img src="assets/images/logo-thumbnail.svg" alt="">
			</a>
			<a *ngIf="!isCollapsed" class="icon">
				<img src="assets/images/icon.png" alt="">
			</a>
		</div>
		<ul class="aside-content" [nzInlineCollapsed]="isCollapsed" *ngIf="menuList?.length" nz-menu nzMode="inline">
			<li nz-menu-item routerLink="/page/home" [nzMatchRouter]="true">
				<i nz-icon nzType="home"></i>
				<span>首页</span>
			</li>
			<ng-container *ngFor="let menu of menuList; let i = index;">
				
				<ng-container *ngIf="menu?.children?.length">
					<li nz-submenu [nzTitle]="menu.name" [nzIcon]="menu.icon">
						<ul>
							<ng-container *ngFor="let subItem of menu.children">
								<li *ngIf="subItem.router" nz-menu-item [routerLink]="subItem?.router"
									[nzMatchRouter]="true">{{subItem.name}}</li>
							</ng-container>
						</ul>
					</li>
				</ng-container>
				<ng-container *ngIf="!menu?.children?.length">
					<li nz-menu-item [key]="i" [routerLink]="menu?.router" [nzMatchRouter]="true">
						<i nz-icon [nzType]="menu.icon"></i>
						<span>{{menu.name}}</span>
					</li>
				</ng-container>
			</ng-container>
		</ul>
		<div class="sider-footer" [ngStyle]="{'width':( isCollapsed ? '80px' : '200px') }"> DTM <div>v{{version}}</div>
		</div>
	</nz-sider>
	<nz-layout style="background: #fff;">
		<nz-header>
			<div class="app-header">
				<!-- <span class="header-trigger" (click)="isCollapsed = !isCollapsed;">
					<i class="trigger" nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"></i>
				</span> -->
				<div style="display: flex;align-items: center;">
					<span class="header-trigger" (click)="isCollapsed = !isCollapsed;">
						<i class="trigger" nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"></i>
					</span>
					<nz-breadcrumb>
						<nz-breadcrumb-item>
							<a [routerLink]="'/page/home'">
								<i nz-icon nzType="home"></i>首页
							</a>
						</nz-breadcrumb-item>
						<nz-breadcrumb-item  style="vertical-align: middle;" *ngFor="let item of breadcrumbList">
							<ng-container *ngIf="item?.icon">
								<i nz-icon [nzType]="item?.icon"></i>
							</ng-container>
							{{item.name}}
						</nz-breadcrumb-item>
					</nz-breadcrumb>
				</div>
				<div>
					<nz-badge nz-dropdown nzTrigger="click" (nzVisibleChange)="getNoticeList($event)"
						[nzPlacement]="'bottomRight'" [nzDropdownMenu]="nzNoticeMenu" [nzCount]="noticeNum" nzShowZero
						>
						<i nz-icon [ngClass]="{'bell-shake': !isMsg}" style="font-size: 18px;color: #1890ff;"
							nzType="bell" nzTheme="outline"></i>
					</nz-badge>
					<nz-dropdown-menu #nzNoticeMenu="nzDropdownMenu">
						<ul nz-menu>
							<li nz-menu-item [routerLink]="'/page/tool/tool-receive'">
								<span class="page-dropdown-text">待领取量具</span>
								<nz-badge nzStandalone [nzCount]="25"></nz-badge>
							</li>
							<!-- <li nz-menu-item>
								2nd menu item
							</li> -->
						</ul>

					</nz-dropdown-menu>
					<p style="padding: 0 20px;margin: 0;float: right;">
						<a (click)="logout()">{{userInfo?.username}}，注销</a>
					</p>
				</div>

			</div>

		</nz-header>

		<!-- <nz-tabset nzType="editable-card">
			<nz-tab *ngFor="let iframe of iframeList" nzForceRender  nzClosable [nzTitle]="iframe.name">
				<nz-content style="overflow: hidden;margin: 10px 16px 0;">
					<div class="inner-content iframe-content">
						<iframe [src]="iframe?.route | safeUrl"></iframe>
					</div>
				</nz-content>
			</nz-tab>
		</nz-tabset> -->
		<nz-content style="overflow: hidden;margin: 10px 16px 0;">
			<div class="inner-content">
				<router-outlet></router-outlet>
			</div>
		</nz-content>
	</nz-layout>
</nz-layout>